<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            overflow 设置内容溢出元素时的操作
            visible（默认） 不作任何操作
            hidden 将溢出部分全部隐藏
            scroll 在元素内加上滚动条 查看溢出内容
            auto 在需要加上滚动条的地方才加上滚动条
            overflow-x 对水平方向溢出的内容进行操作
            overflow-y 对垂直方向溢出的内容进行操作
        */
        .d1 {
            width: 200px;
            height: 200px;
            border: solid;
            overflow: visible;
            overflow: hidden;
            overflow: auto;
            overflow-x: hidden;
        }
        .d2 {
            width: 200px;
            height: 200px;
            border: solid;
            overflow: visible;
            overflow: hidden;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div class="d1">
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        <input type="text" style="width: 300px;">
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
    </div>
    <div class="d2">
        <img src="./jd.png" width="300px" alt="">
    </div>
</body>
</html>